<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    canvas {
      display: inline-block;
      /* width: 100%;
      height: 100%; */
      width: 400px;
      height: 400px;
      /* position: absolute;
      left: 100px;
      top: 100px; */
    }
  </style>
  <script src="../dist/ddd.js"></script>
  <img hidden id="ss" src="texture.png" alt="">
  <img hidden id="ss1" src="assets/back.jpg" alt="">
  <img hidden id="ss2" src="assets/bottom.jpg" alt="">
  <img hidden id="ss3" src="assets/front.jpg" alt="">
  <img hidden id="ss4" src="assets/left.jpg" alt="">
  <img hidden id="ss5" src="assets/top.jpg" alt="">
</head>

<body>
  <canvas id="my_Canvas"></canvas>
  <script>
    /*============= Creating a canvas =================*/
    var mycanvas = document.getElementById('my_Canvas');
    var client = new DDD.UICanvas(mycanvas)
    var camera = new DDD.UICamera();
    var render = new DDD.UIRender(client, camera);

    var colorMaterial = new DDD.UIMaterial({});
    var mapMaterial = new DDD.UITextureMaterial({
      u_Sampler: ss,
    });

    var obj = new DDD.Plane();
    obj._material = colorMaterial;
    obj.scaling(0.2, 0.2, 1.0);
    obj.setPosition(-1, 1, 0)
    render.addRenderObject(obj);


    var center = new DDD.Shape(1, 1, .1, .1, "_cener_");
    center._material = colorMaterial;
    center.add(obj);
    render.addRenderObject(center)


    var box = new DDD.Box();
    box.scaling(0.2, 0.2, 0.2)
    box.rotateX(0.25)
    box.rotateY(0.25)
    box.setPosition(1, 1, 0)
    // box._material = mapMaterial;
    box._material = new DDD.UITextureMaterial({
      u_Sampler: ss, //[ss, ss, ss, ss, ss, ss],
    });
    render.addRenderObject(box);

    var box3 = new DDD.Box();
    box3.scaling(0.2, 0.2, 0.2);
    box3.rotateX(0.25);
    box3.rotateY(0.25);
    box3._material = new DDD.UIMaterial({});
    render.addRenderObject(box3);

    var animation = new DDD.Animation(true)
    animation._duration = 2000;
    animation._repeatCount = 4;
    animation._startOffset = 1000;
    animation._repeatMode = 'reverse'
    // animation._fillBefore = false;
    // animation._fillAfter = true;
    animation.applyTransformation = (interpolatedTime) => {
      // console.log('...', interpolatedTime * 2 - 1, interpolatedTime * 2 - 1)
      obj.setPosition(interpolatedTime * 2 - 1, interpolatedTime * 2 - 1, 0)
    }

    animation.registerAnimationStartListener((ani) => {
      // console.log('start...')
    }).registerAnimationEndListener((ani) => {
      console.log('end...', ani._oneMoreTime, ani._started, ani._ended, ani._more)
    }).registerAnimationRepeatListener((ani) => {
      // console.log('repeat...', ani._repeated)
    }).registerAnimationProgressListener((ani, progress) => {
      // console.log('animation', progress)
    })

    let ani = new DDD.ValueAnimation();
    ani.valueFrom = 2;
    ani.valueTo = 52;
    ani._duration = 2000;
    ani._startOffset = 2000;
    // ani._repeatCount = 200;
    ani._fillEnabled = true;
    ani._fillBefore = false;
    ani._fillAfter = false;
    ani.setInterpolator(new DDD.BounceInterpolator());
    ani
      .registerAnimationStartListener((ani) => {
        // console.log('start...')
      }).registerAnimationProgressListener((ani, progress) => {
        console.log('value animation', progress * 2 - 1.0, ani.getValue() * 2.0 / 52.0 - 1, 0)
      });
    ani.start()

    var animate = function (time) {
      render.render();
      obj.rotateZ(-0.01)
      center.rotateZ(-0.1)
      animation.updateAnimation();
      ani.updateAnimation();
      window.requestAnimationFrame(animate);
    }
    animate(0);

    let ray = new DDD.RayCaster(camera);

    mycanvas.addEventListener('webgl', (e) => {
      // console.log(e.webglX, e.webglY, e.webgldrag)
      if (e.webgldrag) {}
    })
  </script>

</body>

</html>